<template>
    <ItemMusicTop :playlist="state.playlist"/>
    <ItemMusicList :itemList="state.itemList" :subscribedCount="state.playlist.subscribedCount"/>
</template>

<script>
import { useRoute } from 'vue-router';
import { getMusicContent,getMusicList } from '@/request/api/item.js';
import { reactive,onMounted } from 'vue';
import ItemMusicTop from '@/components/MusicItem/ItemMusicTop.vue';
import ItemMusicList from '@/components/MusicItem/ItemMusicList.vue';
export default {
    setup() {
        const state = reactive({
            playlist: {},
            itemList: {}
        });
        onMounted(async () => {
            let id = useRoute().query.id;
            // console.log(id);
            let res = await getMusicContent(id);
            console.log(res);
            state.playlist = res.data.playlist;
            
            let list = await getMusicList(id);
            console.log(list);
             state.itemList = list.data.songs;
            //防止页面刷新导致数据丢失，保存在sessionStorage
            sessionStorage.setItem('itemDetail',JSON.stringify(state))
        });
        return {state}
    },
    components: {
        ItemMusicTop,
        ItemMusicList
    }
}
</script>
